<script setup>
import {ref} from 'vue'
  // 指针旋转角度
  let rotate_deg = ref(0)
  // 过渡效果
  let rotate_transition = ref("transform 3s ease-in-out")
  // 开始游戏
  const startGame = () =>{
    rotate_transition.value = "transform 3s ease-in-out"
    var rand_circle = 5  // 默认多转5圈
    const finalIndex = Math.round(Math.random()*(0-6) + 6)
    // 请求接口拿到结果
    console.log("finalIndex",finalIndex)
    // 旋转的角度
    let randomDeg = 360 - finalIndex * 51.42
    let deg = rand_circle * 360 + randomDeg
    rotate_deg.value = "rotate(" + deg + "deg)"
    setTimeout(()=>{
      alert('本次抽奖完毕')
      rotate_transition.value = ""
      let newDeg = deg % 360
      console.log('deg',deg,'newDeg',newDeg)
      rotate_deg.value = "rotate(" + newDeg  + "deg)"
    },3000)
  }
</script>

<template>
  <header>
      <div class="box" @click="startGame">
        <img class="pointerImg" src="./assets/images/pointer.png">
        <img class="turnTableImg" src="./assets/images/turntable.png" :style="{ transform: rotate_deg, transition: rotate_transition}" />
      </div>
  </header>
</template>

<style scoped>
.box {
  position: relative;
  width: 652px;
  height: 652px;
  cursor: pointer;
}
.pointerImg {
  position: absolute;
  top: 42.5%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 70px;
  height: 180px;
  z-index: 99;
}
.turnTableImg {
  width: 652px;
  height: 652px;
}
</style>